<!--
 @description 身份证正反面上传
 @fileName index.vue
 @author zengqiongying
 @created 2023/05/08 15:47:01
-->
<template>
  <div class="idcard-file-container">
    <div class="idcard-upload">
      <AttachmentUpload
        v-model="formData.ACCESS050"
        view-type="image"
        type-code="ACCESS050"
        :limit="1"
        :objectId="objectId"
        :readonly="readonly"
        :imageHeight="124"
        :imageColumn="1"
      >
        <template #trigger>
          <div class="image">
            <img :src="FrontImage" />
          </div>
        </template>
      </AttachmentUpload>
      <div class="name">身份证国徽面</div>
    </div>
    <div class="idcard-upload">
      <AttachmentUpload
        v-model="formData.ACCESS051"
        view-type="image"
        type-code="ACCESS051"
        :limit="1"
        :objectId="objectId"
        :readonly="readonly"
        :imageHeight="124"
        :imageColumn="1"
      >
        <template #trigger>
          <div class="image">
            <img :src="BackImage" />
          </div>
        </template>
      </AttachmentUpload>
      <div class="name">身份证人像面</div>
    </div>
  </div>
</template>

<script lang="ts">
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { reactive, toRefs, watch, computed, defineComponent, onMounted } from 'vue'
  import FrontImage from '@/assets/images/idcard_front.png'
  import BackImage from '@/assets/images/idcard-back.png'
  import { formatURL } from '@/utils'
  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'UploadIdCard',
    components: { AttachmentUpload },
    props: {
      objectId: {
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      },
      frontList: {
        type: Array,
        default: () => []
      }, // 正面/国徽面图片
      backList: {
        type: Array,
        default: () => []
      } // 背面/人像面图片
    },
    setup(props, ctx: any) {
      const datas = reactive<anyObjectModle>({
        FrontImage,
        BackImage,
        formData: {
          ACCESS050: [], // 正面/ 国徽
          ACCESS051: [] // 反面/ 人像
        }
      })
      watch(
        () => datas.formData.ACCESS050,
        (val) => {
          ctx.emit('update:frontList', val)
        },
        { deep: true, immediate: true }
      )

      watch(
        () => datas.formData.ACCESS051,
        (val) => {
          ctx.emit('update:backList', val)
        },
        { deep: true, immediate: true }
      )

      const getFileUrl = (file: any) => {
        if (file.response) {
          return formatURL(file.response.attachmentUrl)
        }
        if (file.rawFile) {
          return formatURL(file.rawFile.attachmentUrl)
        }
      }

      return {
        ...toRefs(datas),
        getFileUrl
      }
    }
  })
</script>
<style lang="less" scoped>
  // 身份证附件上传样式
  .idcard-file-container {
    display: flex;
    .idcard-upload {
      width: 50%;
      box-sizing: border-box;
      &:first-child {
        padding-right: 4px;
      }
      &:last-child {
        padding-left: 4px;
      }
      .image {
        width: 100%;
        height: 124px;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
        img {
          max-width: 100%;
          max-height: 100%;
          object-fit: cover;
        }
      }
      .name {
        margin-top: 8px;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        text-align: center;
      }
    }
  }
</style>
